<template>
  <a-card :bordered="false" :loading="loading">
    <div class="user_space_container">
      <div class="space_header">
        <div class="header_menu">
          <router-link :to="`/u/${domain}?tab=blog`" v-if="classification.name === ''">
            <div class="header_menu_item" :class="{'isActive': activeTab === 'blog'}">
              <span>博客</span>
            </div>
          </router-link>
          <router-link :to="`/u/${domain}?tab=action`" v-if="classification.name === ''">
            <div class="header_menu_item" :class="{'isActive':activeTab === 'action'}">
              <span>动态</span>
            </div>
          </router-link>
          <div class="header_menu_item" v-if="classification.name">
            <a-space>
              <BookOutlined/>
              <div class="header_menu_item_text">{{ classification.name }}</div>
            </a-space>
          </div>
        </div>
        <div class="header_search">
          <a-input-search v-model:value="searchValue" placeholder="搜索" style="width: 200px" @search="onSearch"/>
        </div>
      </div>
      <div class="space_content">
        <div class="action_list_div" v-if="activeTab==='action'">
          <a-list class="action_list" item-layout="vertical" :data-source="actionList"
                  :pagination="actionList.length>0?actionPagination:null">
            <template #renderItem="{ item }">
              <a-list-item :key="item.id">
                <action-item :action="item"/>
              </a-list-item>
            </template>
          </a-list>
        </div>
        <div class="blog_list_div" v-else>
          <a-list class="blog_list" item-layout="vertical" :data-source="blogList"
                  :pagination="blogList.length>0?blogPagination:null">
            <template #renderItem="{ item }">
              <a-list-item :key="item.id">
                <blog-item :blog="item"/>
              </a-list-item>
            </template>
          </a-list>
        </div>
      </div>
    </div>
  </a-card>
</template>

<script>
import { computed, defineComponent, onMounted, reactive, toRefs } from 'vue'
import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router'
import { BookOutlined } from '@ant-design/icons-vue'
import BlogItem from '@/components/item/BlogItem'
import ActionItem from '@/components/item/ActionItem'
import { GetBlogPage } from '@/service/blog'
import { GetActionPage } from '@/service/action'

export default defineComponent({
  props: {
    domain: {
      type: String,
      default () {
        return ''
      }
    }
  },
  emits: ['changeClassification'],
  setup (props, context) {
    const route = useRoute()
    const router = useRouter()
    const state = reactive({
      domain: computed(() => props.domain),
      activeTab: 'blog',
      loading: false,
      classification: {
        id: '',
        name: ''
      },
      searchValue: '',
      blogList: [{
        title: '',
        summary: ''
      }],
      blogPagination: {
        current: 1,
        total: 0,
        onChange: async (page) => {
          state.blogPagination.current = page
          await methods.getData(route)
        }
      },
      actionList: [],
      actionPagination: {
        current: 1,
        total: 0,
        onChange: async (page) => {
          state.actionPagination.current = page
          await methods.getData(route)
        }
      }
    })

    const methods = reactive({
      getData: async (route) => {
        state.loading = true
        // 从路由中获取参数
        const {
          tab,
          classification,
          search
        } = route.query
        // eslint-disable-next-line no-return-assign
        context.emit('changeClassification', classification, name => state.classification.name = name)
        // 处理搜索值信息
        state.searchValue = search
        // 对tab参数进行过滤
        if (tab && tab === 'action') {
          // 设置标签及重置分页
          state.activeTab = tab
          state.blogPagination.current = 1
          // 查询动态列表
          const {
            count,
            list
          } = await GetActionPage(state.domain, state.actionPagination.current)
          state.actionPagination.total = count
          state.actionList = list
        } else {
          // 设置标签及重置分页
          state.activeTab = 'blog'
          state.actionPagination.current = 1
          // 处理分类信息
          state.classification.id = classification
          // 查询博客列表
          const {
            count,
            list
          } = await GetBlogPage(state.domain, classification, search, state.blogPagination.current)
          state.blogPagination.total = count
          state.blogList = list
          if (search) {
            methods.highlight()
          }
        }
        state.loading = false
      },
      onSearch: () => {
        if (state.searchValue.trim().length === 0) {
          return
        }
        router.push(`/u/${state.domain}?tab=blog&search=${state.searchValue}`)
      },
      highlight: () => {
        const highlightStr = `<span class="highlight">${state.searchValue}</span>`
        const reg = new RegExp(state.searchValue, 'gi')
        state.blogList.forEach(item => {
          item.title = item.title.replaceAll(reg, highlightStr)
          item.summary = item.summary.replaceAll(reg, highlightStr)
        })
      }
    })

    onBeforeRouteUpdate(async (to) => {
      await methods.getData(to)
    })

    onMounted(async () => {
      // 查询默认数据
      await methods.getData(route)
    })

    return {
      ...toRefs(state),
      ...toRefs(methods)
    }
  },
  components: {
    BlogItem,
    ActionItem,
    BookOutlined
  }
})
</script>

<style lang="less">
.user_space_container {
  width: 100%;

  & .space_header {
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #00000020;
    display: flex;
    align-items: center;
    justify-content: space-between;

    & .header_menu {
      height: 100%;
      display: flex;

      & a {
        color: #000000;
      }

      & .header_menu_item {
        min-width: 120px;
        height: 100%;
        font-size: 16px;
        font-weight: 700;
        padding: 10px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-around;

        & .header_menu_item_text {
          max-width: 500px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      & .isActive {
        height: 50px;
        font-weight: 700;
        border-bottom: 1px solid black;
      }
    }
  }

  & .space_content {
    width: 100%;

    & .ant-empty {
      margin: 150px 0;
    }

    & .highlight {
      color: #1da57a;
    }

    & .pagination_div {
      float: right;
    }
  }
}

@media screen and (max-width: 450px) {
  .header_search {
    display: none;
  }
}
</style>
